<template>
  <div class="form">
    <van-row type="flex" align="center">
      <van-col span="7" class="alipay_account require">
        支付宝账号
      </van-col>

      <van-col span="17">
        <van-field
          placeholder="请填写您本人的支付宝账号"
          v-model="account"
          maxlength="50"
          clearable
        />
      </van-col>
    </van-row>

    <van-row type="flex" align="center" class="form_name">
      <van-col span="7" class="alipay_account require">
        姓名
      </van-col>

      <van-col span="17">
        <van-field
          placeholder="请填写该账号实名认证过的姓名"
          v-model="name"
          maxlength="10"
          clearable
        />
      </van-col>
    </van-row>

    <p class="alipay_rule">
      支付宝账号仅用于打款，巴士管家不会泄露您的隐私，请放心填写,
      {{ isInReward ? "" : "可在【我的奖品】修改信息" }}
    </p>

    <div class="alipay_submit" @click="submit">
      {{ isUpdate ? "更改信息" : "提交支付宝信息" }}
    </div>
  </div>
</template>

<script>
import { Field, Cell, CellGroup, Col, Row, Toast } from "vant";
import { timeFormat } from "@/utils/util";
import { updateApi } from "@/service";
export default {
  components: {
    [Field.name]: Field,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Col.name]: Col,
    [Row.name]: Row
  },
  props: {
    isUpdate: {
      type: Boolean,
      default: false
    },
    isInReward: {
      type: Boolean,
      default: false
    }
  },
  data: function() {
    return {
      account: this.defaultAccount,
      name: this.defaultName
    };
  },
  computed: {
    defaultAccount() {
      return this.$store.state.form.account;
    },
    defaultName() {
      return this.$store.state.form.name;
    },
    recordId() {
      return this.$store.state.mainPage.recordId;
    },
    drawEndDate() {
      return timeFormat(this.$store.state.mainPage.drawEndDate, "M月D日");
    }
  },
  created() {
    this.account = this.defaultAccount;
    this.name = this.defaultName;
  },
  methods: {
    checkForm() {
      const { account, name } = this;
      if (!account) {
        Toast("支付宝账号不能为空");
        return false;
      }

      if (!name) {
        Toast("实名认证过的姓名不能为空");
        return false;
      }

      return true;
    },
    // 提交表单
    async submit() {
      if (!this.checkForm()) return;
      const { account, name, recordId, isInReward } = this;
      let param = {
        recordId,
        account,
        accountName: name
      };
      try {
        if (isInReward) {
          this.$store.commit("changeAlipay", false);
          await updateApi(param);
          this.$store.dispatch("reward");
        } else {
          await updateApi(param);
          this.$store.dispatch("main");
        }

        Toast("您已成功提交，将在核实车票后为您打款报销");
      } catch (e) {
        console.log(e);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.alipay_account {
  font-size: 26px;
  font-weight: 800;
  color: #333333;
  text-align: left;
}

.alipay_rule {
  font-size: 18px;
  margin-top: 50px;
  font-weight: 500;
  color: #666666;
  text-align: left;
  line-height: 31px;
}

.alipay_submit {
  width: 454px;
  height: 110px;
  line-height: 110px;
  background: linear-gradient(90deg, #fc6142, #f9412c);
  box-shadow: 0px 3px 43px 0px rgba(180, 180, 180, 0.2);
  border-radius: 55px;
  font-size: 34px;
  margin: 38px auto 0 auto;
  font-weight: 800;
  color: #ffffff;
}

.form_name {
  margin-top: 18px;
}
</style>

<style lang="scss">
.form {
  .van-cell {
    padding: 8px 8px;
    border: 1px solid #b7b8b9;
    border-radius: 10px;
  }
}
</style>
